<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<script>
  function sleep(time) {
    let flag = Date.now()
    while (Date.now() - flag < time) {

    }
  }
  function useTime(time, flag) {
    console.log(flag + '=>' + (Date.now() - time))
  }
  const time = Date.now()
  setTimeout(() => {
    useTime(time, 'time-out')
  }, 0)
  // fetch('/', {
  //   method: 'GET'
  // }).then(res => {
  //   console.log(res, '---------')
  // })
  fetch('/', {
    method: 'GET'
  }).then(res => {
    useTime(time, 'fetch')
  })
  Promise.resolve().then(() => {
    useTime(time, 'promise')
  })
  // alert(1)
  // sleep(1000 * 1)
  // console.log(2)
  // const ajax = new XMLHttpRequest()
  // ajax.setRequestHeader()

</script>
<script>
  function creatElement(vnode) {
    if (typeof vnode !== 'object') {
      return document.createTextNode(vnode)
    }
    const {tagName = '', attrs = {}, children = []} = vnode
    if (!tagName) {
      return null
    }
    const fragment = document.createElement(tagName)
    Object.keys(attrs).forEach((key) => {
      fragment.setAttribute(key, attrs[key])
    })
    children.forEach(child => {
      fragment.appendChild(creatElement(child))
    })
    return fragment
  }
  const VNode = {
    tagName: 'ul',
    attrs: {
      id: 'list'
    },
    children: [
      {
        tagName: 'li',
        attrs: {
          class: 'a'
        },
        children: ['text_a']
      },
      {
        tagName: 'li',
        attrs: {
          class: 'b'
        },
        children: ['text_b']
      },
    ]
  }
  document.body.appendChild(creatElement(VNode))

  function patch(vnode, newVnode) {
    const children = vnode.children || []
    const newChildren = vnode.children || []
    children.forEach((item, index) => {
      let newChild = newChildren[index]
      if (newChild.tag === null) {
        return
      }
      if (newChild.tag === item.tag) {
        // 标签一样， 更新
        updateChild(item, newChild)
      } else {
        // 否则替换
        replaceChild(item, newChild)
      }
    })
  }
</script>
</body>
</html>
